<template>
    <div class="article-card">
        <div class="card-header">
            <el-avatar :size="32" :src="avatar"/>
            <span class="author-name">
                <el-link
                    :underline="false"
                    :href="`/user/${userId}/info`"
                >
                    {{ author }}
                </el-link>
            </span>
        </div>
        <div class="card-body">
            <div class="card-content">
                <div>
                    <el-link :underline="false" :href="`/article/${id}`" class="title word-1">{{ title }}</el-link>
                </div>
                <div class="desc">
                    {{ content }}
                </div>
                <div class="meta">
                    <p class="num">
                        <el-icon>
                            <View/>
                        </el-icon>
                        <span>阅读 {{ views }}</span>
                    </p>
                    <p class="num">
                        <el-icon>
                            <Star/>
                        </el-icon>
                        <span>
                                {{ likes }} 赞
                            </span>
                    </p>
                    <p class="num">
                        <el-icon>
                            <Collection/>
                        </el-icon>
                        <span>
                            {{ favorites }} 收藏
                        </span>
                    </p>
                </div>
            </div>
            <img
                    class="cover"
                    :src="cover"
                    alt="cover"
            />
        </div>
    </div>
</template>

<script setup lang="ts">
import {Collection, Star, View} from '@element-plus/icons-vue'

defineProps<{
    id: string
    avatar: string
    author: string
    title: string
    content: string
    cover: string
    userId: string | number
    views?: string | number
    likes?: string | number
    favorites?: string | number
}>()
</script>

<style scoped>
.article-card {
    border-bottom: 1px solid #eee;
    padding: 16px 0;
    background: #fff;
    width: 100%;
    max-width: 800px;
}

.card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    /*margin-bottom: 8px;*/
}

.author-name {
    font-weight: 500;
}

.card-body {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.card-content {
    flex: 1;
    min-width: 0;
}

.title {
    font-size: 18px;
    font-weight: 500;
    /*color: #000;*/
    margin: 8px 0 4px;
}

.word-1 {
    overflow: hidden;
    white-space: normal;
    word-break: break-all;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

.desc {
    color: #888;
    font-size: 15px;
    /*margin-bottom: 10px;*/
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 500px;
}

.meta {
    justify-items: center;
    display: flex;
    gap: 16px;
    color: #888;
    font-size: 14px;
    align-items: center;
}

.cover {
    width: 120px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    margin-left: 16px;
}

.num {
    display: flex;
    align-items: center;
    gap: 4px;
}
</style>